<template>
	<view class="page">
		<up-navbar   title="搜索"  :autoBack="true"  safeAreaInsetTop placeholder >   </up-navbar>
		
		<view style="background-color: #fff;    height: 100rpx; ">
			<view style="width: 95%; margin: 0 auto;">			
				<view class=" " >
					<view class="search-form round" @click="symtz">						
						<image class="" src="/static/Frame@3x.png" alt="" style="width:35rpx;height:35rpx; margin-left: 20rpx;" />
						<input style="width: 73%;"  v-model="sousuos" :adjust-position="false" type="text" placeholder="搜索" confirm-type="search">				
						<view class="action">
							<button class="sjign" @click="shousuanjk" style=" color: #fff;">搜索</button>
						</view> 
						</input>
					</view>
					
				</view>
				
				
				
			</view>
		</view>
	<view v-if="lishis==1">
		<view style="background-color: #fff; "  v-if="history.length!=0">
			<view style="width: 95%; margin: 0 auto;">
				<view style=" padding: 20rpx;">
					<view class="flex   justify-between">
						<view class=" padding-sm margin-xs radius">历史记录</view>
						<view class=" padding-sm margin-xs radius" @click="clears()">
							
							
							<!-- <text class="lg text-gray cuIcon-deletefill" ></text> -->
							<up-icon name="trash-fill"></up-icon>
							
						</view>
					</view>
				
					<view class="history">
						<view v-for="(item, index) in history" :key="index" @click="goTags(item)" class="tags">{{ item }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view v-if="lishis==2">
		
		<view v-if="list.length!=0">
			<view class="yanshi" v-for="(item, index) in list" :key="index" @click="xinagqing(item.id)">
				<view style=" width: 95%; margin: 0 auto; ">
					<view style="width: 100%; display: flex;height: 150rpx;" >
						<view class="neirngssf">
							<image class="icon1" :src="item.avatar" alt="" />
						</view>
						<view class="neirngs">
							<view style="line-height: 87rpx;"><text>{{item.nickname}}</text></view>
							<view><text style="color: #999999;">{{item.mobile}}</text></view>
						</view>
						<view class="neirngs" style="align-items: center; display: flex; justify-content: flex-end;" >
							<view style="display: flex;align-items: center;justify-content: center;">
								<text style="color: #999999;"> 查看资料</text>
								<image class="" src="/static/Frameyoux.png" alt="" style="width:35rpx;height:35rpx; margin-left: 20rpx;" />
							</view>
						</view>
					</view>
					<view style="width: 100%; display: flex; text-align: center;flex-wrap: wrap;" >
					
						<view class=" linglein "  v-for="(items, index) in item.service_labels_name" :key="index">						
							<view class="linglein_meir"  ><text style="color: #FF9839;" >{{items}}</text></view>						
						</view>
						
					
						
					</view>
					
				</view>
			</view>
		</view>
		<view class="" style="width: 50%; margin: 0 auto; height: 260rpx;" v-else>
			
			<!-- <image class="icon1" :src="item.avatars" alt="" /> -->
			<image class="icon1" src="/static/zanwu.png" alt="" />
			<view><text>搜不到相关内容</text></view>
		</view>
	</view>
		
		
		
		
		
		
	</view>
</template>

<script>
	import request from '@/utils/request'
	export default {
		data() {
			return {
				lishis:1,
				DataList:'https://cdn.uviewui.com/uview/album/1.jpg',
				list:[],
				history:[],
				sousuos:null,
				chongfu:[],
				page: 1,
				limit: 10,
			}
		},
		onShow() {
			
			this.page=1
			this.lishis=1
			this.getHistory()
			// this.fenhong()
		},
		methods: {
			fenhong(){
					var insg = uni.getStorageSync('userinfo')
					
					console.log(this.sousuos,'1111')
					if(this.sousuos!=null){
						this.$request({
							url: '/api/User/getMyUserLists',
							header:"application/x-www-form-urlencoded",
							data: {							
								type:insg.user_type,
								page: this.page,
								limit: this.limit,
								search:this.sousuos
							}
						}).then(res => {
							if (res.code == 1) {
								console.log(res)
								res.data.forEach((item, index) => {
									item.avatars=request+item.avatar
								});	
								this.list=res.data
								console.log(this.list)
								
							} else {
								
							
							}
						})
					}else{
						uni.showToast({
							   icon: 'none',
							    title:'填写搜索内容',			
							    duration:2000		  
							})
					}
					
				
			},
			onReachBottom() {
				console.log(111)
				var insg = uni.getStorageSync('userinfo')
				var that = this
				uni.showLoading({
					title: '加载中...',
					mask: true //遮蔽层
				})
				console.log(1231123);
				that.page += 1;				
				this.$request({
					url: '/api/User/getMyUserLists',
					header: "application/x-www-form-urlencoded",
					data: {
						type: insg.user_type,
						page: that.page,
						limit: that.limit,
					}
				}).then(res => {
					if (res.code == 1) {
						var feilei_neirong = res.data.forEach((item, index) => {
							item.avatars=request+item.avatar
						});	
						console.log(res)
						if (feilei_neirong.length != 0) {
			
							feilei_neirong.forEach(rect => {
			
								that.list.push(rect);
							});
							console.log(that.list = that.list)
			
						
							uni.hideLoading()
						} else {
							uni.showToast({
								title: '没有更多的数据了',
								icon: 'none',
								duration: 2000
							});
						}
						
						// this.list=res.data
					} else {
			
			
					}
				})
			},
			clears() {
				// 先清空本地历史记录
				this.history = []
				// 再清除缓存
				uni.removeStorageSync('history')
			
			},
			goTags(item) {
				console.log(item)
				this.sousuos = item
				// this.liebiao()
			},
			xinagqing(id){
					 console.log('item');
					
					 uni.navigateTo({
					 		url: '/pages/my/kehu/wode_kehu_xiangqing/wode_kehu_xiangqing?id='+id,
					 })
			},
			shousuanjk() {
				
				console.log(this.sousuos)
				if(this.sousuos!=null){
					this.chongfu.push(this.sousuos)
					// 再向缓存中设置进去
					var lishis = this.chongfu.reverse()
					var lishigs_history = [...new Set(lishis)]
					
					this.history=lishigs_history
					this.lishis=2
					uni.setStorageSync('history', lishigs_history)
					this.fenhong()
				}else{
					uni.showToast({
						   icon: 'none',
						    title:'填写搜索内容',			
						    duration:2000		  
						})
				}
				
			
			},
			getHistory() {
				// 倒序数组,最新的在前 / 相同关键字去重
				const p = uni.getStorageSync('history') || []
				console.log(p)
				this.history = p.reverse()
				// this.history = [...new Set(this.history)]
			},
			
		},
		onReachBottom() {
			this.onReachBottom()
		},
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		    justify-content: space-between;
	}
.sjign{
	position: relative;
	    border: 0rpx;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    box-sizing: border-box;
	    padding: 0 30rpx;
	    font-size: 28rpx;
	    height: 50rpx;
	    line-height: 1;
	    text-align: center;
	    text-decoration: none;
	    overflow: visible;
	    margin-left: initial;
	    -webkit-transform: translate(0rpx, 0rpx);
	    transform: translate(0rpx, 0rpx);
	    margin-right: initial;
		  
		       background-image: linear-gradient(to bottom, #FF9839, #FF7139);
		    color: #333333;
			border-radius: 65rpx;
			height: 64rpx;

}
button::after{ border: none;} 
 .search-form {
	       background-color: #f5f5f5;
	       line-height: 32px;
	       height: 64rpx;
	       font-size: 24rpx;
	       color: #333;
	       flex: 1;
	       display: flex;
	       align-items: center;
	       margin: 0 30rpx;
	       border-radius: 60rpx;
	}
	.page{
		background: #F8F8F8;
	}
	
	
	
	
	
	
	
	.linglein_meir{
		background-color: #FFF6EE; border-radius: 10rpx;
	}
	.linglein{
		width: 30%;padding: 10rpx;
		line-height: 80rpx;
	}
	.yanshi{
		width: 95%; margin: 0 auto;   margin-top: 20rpx; background-color: #fff; border-radius: 20rpx;
	}
	.neirngssf{
		width: 20%;
		padding: 10rpx;
		
	}
	.neirngs{
		width: 36%;
		padding: 10rpx;
		
		
		 
	}
	.icon1{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		
	}
</style>
